<template>
  <view class="content">
    <view class="container">
      <view class="title">用户协议</view>
      <view class="agreement-container">
        <view class="agreement-intro">尊敬的用户：</view>
        <view class="agreement-desc">您即将通过本登录页面使用中国移动账户登录上海分互链信息技术有限公司所有的"分互链积分平台"，如果您无法认同如下内容，请您点击"返回"并拒绝授权：</view>
        <view class="agreement-item" v-for="(item, index) in agreements" :key="index">
          <text class="agreement-index">{{index + 1}}、</text>
          <text class="agreement-text">{{item}}</text>
        </view>
      </view>
      <view class="back-btn" @click="handleBack">返回</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agreements: [
        '如您点击"继续"，即视为您同意和授权中国移动向上海分互链信息技术有限公司提供账户数据接口以使上海分互链信息技术有限公司可以调用您在中国移动网站(www.10086.cn)的注册账户的登录信息，便于您直接使用您在中国移动网站的注册信息登录"分互链积分平台"。',
        '如您点击"继续"，即视为您同意及授权 （1）上海分互链信息技术有限公司通过数据接口实时读取您在中国移动的消费积分的剩余数量，以完成兑换畅由积分、集分宝或其他积分权益； （2）上海分互链信息技术有限公司将您在中国移动的消费积分的剩余数量，共享给小程序或H5页面运营方，用于为您在页面显示剩余积分数量。',
        '如您点击"继续"，则表明您已明确知晓上海分互链信息技术有限公司及"分互链积分平台"并非中国移动的关联公司或由中国移动运营，您使用"分互链积分平台"或上海分互链信息技术有限公司提供的其他服务的行为均与中国移动无关，您也不能就使用中国移动网站注册信息登录及使用"分互链积分平台"的后果要求中国移动承担任何责任。',
        '上海分互链信息技术有限公司及"分互链积分平台"所提供的商品或服务的质量和品质由上海分互联信息技术有限公司独立负责，上海分互链信息技术有限公司自行对提供该等商品或服务引起的后果向您承担全部责任。',
        '中国移动郑重提醒您保管好您在中国移动网站的注册登录信息，切勿向任何人透露您的账号、密码等相关信息。除非得到您的同意及授权，中国移动不会向任何第三方透露您的任何信息。',
        '中国移动郑重提醒您启用杀毒软件和安全措施，以防范各类网络风险。'
      ]
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  overflow: hidden;
}

.content {
  min-height: 100vh;
  height: 100vh;
  background-image: url('/static/background1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
  position: relative;
}

.container {
  width: 100%;
  height: calc(100% - var(--status-bar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  box-sizing: border-box;
  position: relative;
}

.title {
  font-family: ZiZhiQuXiMaiTi !important;
  font-size: 72rpx;
  color: #FFFFFF;
  margin: 60rpx 0;
  font-weight: normal;
  text-align: center;
}

.agreement-container {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  margin-bottom: 40rpx;
  max-height: calc(100vh - 400rpx);
  overflow-y: auto;
}

.agreement-intro {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.agreement-desc {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.agreement-item {
  display: flex;
  margin-bottom: 30rpx;
}

.agreement-item:last-child {
  margin-bottom: 0;
}

.agreement-index {
  font-size: 28rpx;
  color: #333;
  flex-shrink: 0;
  font-weight: bold;
}

.agreement-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  flex: 1;
}

.back-btn {
  width: 620rpx;
  height: 100rpx;
  background: #FF6B35;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 36rpx;
  margin-top: auto;
  margin-bottom: 60rpx;
}
</style> 